<template>
    <div class="index">
    
    <b-modal ref="myWarning" hide-footer title="提示">
       <div class="d-block text-center">
          <h4>{{msg}}</h4>
       </div>
    </b-modal>
    
    <div class="top2"></div>
    <b-container>
            <br><br>
            <div class="div-login">
            <div class="d-block text-center">
            <b-row class="mb-4 text-center">
                <b-input-group size="lg">
                <b-input-group-prepend is-text><b-icon icon="person-fill"></b-icon></b-input-group-prepend>
                <b-form-input v-model="username" id="input-user" type="text" placeholder="用户名"></b-form-input>
                </b-input-group>
            </b-row>
            <b-row class="mb-2 text-center">
                <b-input-group size="lg">
                <b-input-group-prepend is-text><b-icon icon="lock-fill"></b-icon></b-input-group-prepend>
                <b-form-input v-model="password" id="input-pwd" type="password" placeholder="密码" @keyup.enter.native="login()"></b-form-input>
                </b-input-group>
            </b-row>
            <b-row class="mb-0 text-center">
               <b-col class="p-2" style="font-family: sans-serif"></b-col>
            </b-row>
            <br>
            <div slot="modal-footer" class="w-100">
                <b-button class="float-center" variant="primary" size="lg" style="width: 100px" @click.prevent="login()">登录</b-button>
            </div>
            </div>
        </div>  
    </b-container>                
  </div>
</template>

<script>
var crypto = require("crypto");
export default {
  data () {
    return {
      msg: '',
      token: '',
      username: '',
      password: '',
    }
  },
  methods: {
    login() {
      if (!this.username) {
        this.msg = "请输入用户名";
        this.$refs.myWarning.show();
        return
      }
      if (!this.password) {
        this.msg = "请输入密码";
        this.$refs.myWarning.show();
        return
      }
      this.$axios.post('/api/login/', JSON.stringify({username: this.username, password: this.my_md5(this.password)}), {params:{showLoading: false}}).then((response) => {
          var res = response.data
          if (res.code == "101") {
              this.msg = res.msg
              this.$refs.myWarning.show()
          } else {
              this.token = res.token
              localStorage.setItem('accessToken' , this.token)
              // 跳转到用户中心
              this.$router.push({
                 path: '/user',
                 query: {
                   id: this.username,
                }    
              })
          }
      }).catch(function(error){
         console.log(error)
      })
    },
    my_md5(initPWD){
        var md5 = crypto.createHash('md5'); //创建哈希加密算法，后边可以是md5，sha1,sha256等
        var password = md5.update(initPWD).digest('base64');
        return password;
    }
  },
  head() {
      return {
        title: '登录 | 英伦留声机',
	  }
  },
  mounted: function() {
      this.$store.dispatch("hideloader")
      this.$route.meta.title = '登录 | 英伦留声机';      
      document.title = this.$route.meta.title 
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

    a.page-link {color: #222222;}
    a.page-link:hover {color: #999999;}
    a.page-link:active {color: #999999;}
    a.page-link:visited {color: #222222;}
    
    a:not([href]):not([tabindex]) {color: #222222;}
    
</style>

<!--<style src="../assets/css/link.css"></style>
<!--<style src="../assets/css/font.css"></style>
<!--<style src="../assets/css/global.css"></style>

